<section v-if="branch && branch.commits" class="details-only branch-details non-code block-section">
  <header v-if="header">
    <button class="expander" v-app-class-toggle="{ target: '.branch-details', class: 'collapsed' }"></button>
    <h1>Branch {{branch.displayName}}</h1>
  </header>
  <div class="content">
    <div v-if="branch.feature && branch.feature.url" class="branch-feature-link">
      <a v-bind:href="branch.feature.url" target="_blank">{{branch.feature.url}}</a>
    </div>
    <div>
      Latest commit
      <a v-bind:href="'https://github.com/dotnet/roslyn/commit/' + branch.commits[0].hash" target="_blank">{{branch.commits[0].hash.substr(0, 7)}}</a>
      by {{branch.commits[0].author}}:
    </div>
    <div class="branch-commit-message">{{branch.commits[0].message.trim()}}</div>
  </div>
</section>